import { Link } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import Header from '../components/header';
import RouterView from '../router';
import store from '../redux';

import './index.scss';

const { Sider, Content, Footer } = Layout;

export default ({ routes }) => {
    // 从登录态中拿过来了
    // const menus = JSON.parse(window.sessionStorage.getItem('menus'));
    // 取到用户的权限id数组
    const acls = store.getState().menus.map((item) => item.id);
    // 过滤掉没有权限访问的路由配置
    const authRoutes = routes.filter(
        (item) => !item.acl_id || acls.includes(item.acl_id)
    );
    // 权限菜单
    const authMenus = routes.filter(
        (item) => !item.acl_id || acls.includes(item.acl_id)
    );
    console.log('authMenus', authMenus);
    // const profile = JSON.parse(window.sessionStorage.getItem('profile'));
    const profile = store.getState().profile;
    return (
        <div className="layout">
            <Layout>
                <Header profile={profile} />
                <Layout>
                    <Sider theme="light">
                        <Menu mode="inline">
                            {authMenus.map((item, index) => (
                                <Menu.Item key={index} icon={item.icon}>
                                    <Link to={item.path}>{item.name}</Link>
                                </Menu.Item>
                            ))}
                        </Menu>
                    </Sider>

                    <Content>
                        <RouterView routes={authRoutes} />
                    </Content>
                </Layout>

                <Footer>底部页脚</Footer>
            </Layout>
        </div>
    );
};
